<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="author" content="yyk,15934524011@163.com">
    <meta name="revised" content="yyk, 2022">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <link rel="stylesheet" href="./swiper-bundle.min.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            position: relative;
            height: 100%;
            background: #333;
        }

        video {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="videoList">
        <video id="video" width="100%" height="100%" loop="loop" autoplay="autoplay" attr-index="0"
            src="http://syimg.v5portal.com//itemvideo/1/201907082049256035_a5b986857860c5a23c0f25e55814ec07.mp4">
        </video>
    </div>


    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        var videoList = [
            "http://syimg.v5portal.com//itemvideo/1/201907082049256035_a5b986857860c5a23c0f25e55814ec07.mp4",
            "https://static.yximgs.com/s1/videos/home-2.mp4",
            "https://static.yximgs.com/s1/videos/www_main-059ce9beee.mp4"
        ];

        $("body").on("touchstart", function (e) {
            // 判断默认行为是否可以被禁用
            if (e.cancelable) {
                // 判断默认行为是否已经被禁用
                if (!e.defaultPrevented) {
                    e.preventDefault();
                }
            }
            startX = e.originalEvent.changedTouches[0].pageX,
                startY = e.originalEvent.changedTouches[0].pageY;
        });
        $("body").on("touchend", function (e) {
            // 判断默认行为是否可以被禁用
            if (e.cancelable) {
                // 判断默认行为是否已经被禁用
                if (!e.defaultPrevented) {
                    //e.preventDefault();
                }
            }
            moveEndX = e.originalEvent.changedTouches[0].pageX,
                moveEndY = e.originalEvent.changedTouches[0].pageY,
                X = moveEndX - startX,
                Y = moveEndY - startY;
            //左滑

            //下滑 上一个
            if (Y > 30) {
                var index = $("#video").attr("attr-index");
                if (parseInt(index) > 0) {
                    $("#video").attr("src", videoList[parseInt(index) - 1]);
                    $("#video").attr("attr-index", (parseInt(index) - 1));
                }
            }
            //上滑  下一个
            else if (Y < 30 && Y != 0) {
                var index = $("#video").attr("attr-index");
                if (parseInt(index) < videoList.length) {
                    $("#video").attr("src", videoList[parseInt(index) + 1]);
                    $("#video").attr("attr-index", (parseInt(index) + 1));
                }

            }
            //单击
            else {
                alert('单击');
            }
        });
    </script>
</body>

</html>